<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!-- 导入boot文件，顺序固定	 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/comm.css"/>
    <style>
       
        img{
            border:2px solid #94C58B;
            border-radius: 5px;
            transition: 1s;
        }
        img:hover{
            transform: scale(1.2) rotate(40deg);
            box-shadow: 1px 1px 20px #f8f9fa ;
        }
        #middle_img{
            transition: 1s;
            border-radius: 50%;
            animation:change 20s linear infinite;
        }
        @keyframes change  {
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
        @keyframes siz {
 
            from{width: 0;}
            to{width: 100%;}

        }
        #plantsText{
            height: 10vh;
            overflow: hidden;
            letter-spacing: 0.15em;
            animation: siz 8s steps(60) forwards;
        }
    </style>
</head>
<body>
<header>
    <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
</header>
<div id="app">
    <div class="container-fluid p-3 ">
        <div class="border p-5" id="photo">
            <div class="row">
                <div class="col-md-2 col-sm-4"><img :src="imgs[0].image_path" alt="" class="w-75"/></div>
                <div class="col-md-2 col-sm-4 offset-8"><img :src="imgs[1].image_path" alt="" class="w-75 float-right"/></div>
            </div>
            
            <div class="row ">
                <div class="col-md-2 col-sm-4 offset-2"><img :src="imgs[2].image_path" alt="" class="w-75"/></div>
                <div class="col-md-2 col-sm-4 offset-4"><img :src="imgs[3].image_path" alt="" class="w-75 float-right"/></div>
            </div>
            <div class="row" >
                <img src="../imgs/thumbnail.png" alt="" class="" id="middle_img" style="opacity: 0"/>
            </div>
            <div class="row col-md-2 col-sm-4 offset-5 " id="plantsText">
                {{desc}}
            </div>
            
            <div class="row ">
                <div class="col-md-2 col-sm-4 offset-2"><img :src="imgs[4].image_path" alt="" class="w-75"/></div>
                <div class="col-md-2 col-sm-4 offset-4"><img :src="imgs[5].image_path" alt="" class="w-75 float-right"/></div>
            </div>
            
            <div class="row pt-3">
                <div class="col-md-2 col-sm-4 "><img :src="imgs[6].image_path" alt="" class="w-75"/></div>
                <div class="col-md-2 col-sm-4 offset-8"><img :src="imgs[7].image_path" alt="" class="w-75 float-right"/></div>
            </div>
        </div>
    </div>
</div>
<script>
    var imgs=document.querySelectorAll(".row div:not(only-child) img")
    //console.log(imgs)
    var mdImg=document.getElementById("middle_img");
    //console.log(mdImg);
    for(var img of imgs){
        //console.log(img)
        img.onclick=function(e){
            var img=this;
            e.stopPropagation();
            mdImg.style.opacity=1;
            mdImg.src=img.src;
        }
    }
    var div=document.getElementById("photo");
    div.onclick=function(){mdImg.style.opacity=0;}
</script>
</body>
<script>
 new Vue({
        el: "#app",
        data: {//图片的文章详情数据
            desc:"",// 文字数据
            imgs:[]//图片列表
        },
        //网页一进来就调用
        created() {
            // 获取文章数据。并且3秒重新轮换一次
            this.getDesc()
            setInterval(() => {this.getDesc() }, 3000)
            this.getImg()
            // 获取图片数据，并且6秒轮换一次
            setInterval(() => {this.getImg() }, 6000)
        
        },
    
        // 方法全部写在这
        methods: {
            // 文字数据获取
            async getDesc(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/randDesc');
                        const data = await response.json();
                        // 请求成功时更新数据
                        this.desc = data.data[0]["text"]
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            },
            // 图片列表数据获取
            async getImg(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/randImg');
                        const data = await response.json();
                        // 请求成功时更新数据
                        this.imgs = data.data
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            },
        },

    })
</script>
</html>